<template>
    <Card>
        <h3 style="padding: 10px 0">drag-drawer组件是对iview的drawer组件的封装，在支持drawer所有api的基础上，支持可拖动和footer底部插槽</h3>
        <div style="padding: 10px 0">
            <b>
                方向
                <i-switch v-model="placement">
                    <span slot="open">左</span>
                    <span slot="close">右</span>
                </i-switch>
            </b>
            <b>
                是否可拖动
                <i-switch v-model="draggable"></i-switch>
            </b>
            <Button @click="showContainerBDrawer = !showContainerBDrawer" type="primary" style="margin-left: 10px"
                >{{ showContainerBDrawer ? '关闭' : '打开' }}容器内抽屉</Button
            >
            <Button @click="showWindowBDrawer = true" type="primary" style="margin-left: 10px">打开全屏抽屉</Button>
        </div>
        <div class="drag-drawer-inner-box">
            <drag-drawer
                v-model="showContainerBDrawer"
                :width.sync="width2"
                min-width="30px"
                :inner="true"
                :transfer="false"
                :placement="placementComputed"
                :draggable="draggable"
                @on-resize="handleResize"
                :scrollable="true"
            >
                <div slot="header">
                    <Icon type="md-aperture" :size="18"></Icon>
                    <b>这是标题</b>
                </div>
                <p v-for="n in 200" :key="n">{{ n }}</p>
                <div slot="footer">
                    <p>123123</p>
                    <p>21312</p>
                </div>
            </drag-drawer>
        </div>
        <drag-drawer
            v-model="showWindowBDrawer"
            :width.sync="width1"
            :min-width="300"
            :placement="placementComputed"
            :draggable="draggable"
            :scrollable="true"
        >
            <div slot="header">
                <Icon type="md-aperture" :size="18"></Icon>
                <b>这是标题</b>
            </div>
            <Button @click="showBDrawer3 = true">显示多层</Button>
            <p v-for="n in 200" :key="n">{{ n }}</p>
        </drag-drawer>
    </Card>
</template>

<script>
import DragDrawer from '_c/drag-drawer'
export default {
    name: 'drag_drawer_page',
    components: {
        DragDrawer
    },
    data() {
        return {
            showWindowBDrawer: false,
            showContainerBDrawer: false,
            showBDrawer3: false,
            width1: 300,
            width2: 200,
            placement: false,
            draggable: true
        }
    },
    computed: {
        placementComputed() {
            return this.placement ? 'left' : 'right'
        }
    },
    methods: {
        handleResize(event) {
            const {atMin} = event
            /* eslint-disable */
            console.log(atMin)
        }
    }
}
</script>

<style lang="scss">
.drag-drawer-inner-box {
    position: relative;
    width: 500px;
    height: 400px;
    background: pink;
    border: 1px solid pink;
}
</style>
